<template>
    <div style="width:100%">
        <el-input v-model="value" :placeholder="$t('public.selectPl')" @focus="visible = true" :disabled="disabled" size="small"  style="width: 100%"/>
        <el-dialog :visible="visible"  :title="$t('basicData.baseName')" width="1000px" append-to-body top="14vh" class="knowledge-dialog" :close-on-click-modal="false" :before-close="close" @close="onClose" @open="onOpen">
            <div>
                <el-form :model="queryParams" size="small" label-position="left" label-suffix=":" ref="queryParams" label-width="80px">
                    <el-row :gutter="24">
                        <el-col :span="6">
                            <el-form-item label="基地名称" prop="baseNameSearch">
                                <el-input v-model="queryParams.baseName" :placeholder="$t('public.inputPl')" @keyup.enter.native="getList" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item style="text-align:right">
                                <el-button type="primary" icon="el-icon-search" class="search-btn" @click="getList" size="mini">{{ $t("public.search") }}</el-button>
                                <el-button icon="el-icon-refresh" @click="reset" size="mini">{{ $t("public.reset") }}</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div class="container-table">
                    <el-table max-height="350" border stripe :data="list" @selection-change="handleSelectionChange">
                        <el-table-column :label="$t('public.serialNum')" type="index" width="50" align="center">
                            <template slot-scope="scope">
                                <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="基地名称" align="left" prop="baseName" minWidth="160" />
                        <el-table-column :label="$t('public.opera')" align="center" width="100">
                            <template slot-scope="scope">
                                <a class="action-wrap" @click="choose(scope)" style="color:#5a9eaf">
                                    {{$t('rule.select')}}
                                </a>
                            </template>
                        </el-table-column>
                    </el-table>

                    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" layout="total, sizes, prev, pager, next, jumper" />
                </div>
            </div>

            <div slot="footer">
                <el-button size="mini" type="default" icon="el-icon-close" @click="handleConfirm">{{ $t("btn.close") }}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { baseList } from '@/api/masterdata/base'

export default {
    name: 'BaseDialog',
    props: {
        value: {
            type: [String, Number, Array, Object],
            default() {
                return ''
            },
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        params: {
            type: Object,
            default: null,
        },
    },
    data() {
        return {
            total: 1,
            list: [],
            queryParams: {
                pageNum: 1,
                pageSize: 20,
                baseName: ''
            },
            visible: false,
            data: null,
            title: '',
        }
    },
    watch:{
        value(newVal){
            this.$emit('input',newVal);
        }
    },
    methods: {
        getList() {
            baseList(this.queryParams).then((response) => {
                if (response.rows) {
                    this.list = response.rows
                    this.total = response.total
                }
            })
        },
        // 窗口打开
        onOpen() {
            this.getList()
        },
        reset() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
            }
            this.getList()
        },
        choose(scope) {
            this.$emit('input',scope.row.baseName)
            this.$emit('callback', scope.row)
            this.visible = false
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.dictId)
            this.single = selection.length != 1
            this.multiple = !selection.length
        },
        // 窗口关闭
        onClose() {},
        handleConfirm() {
            this.visible = false
        },
        // 窗口关闭前执行
        close() {
            this.visible = false
        },
    },
}
</script>

<style scoped>
::v-deep .el-dialog__footer {
    text-align: center;
}
.search-btn {
    background: #20b09f;
    border-color: #20b09f;
}
</style>
